<template>
    <div class="home-index" id="pray-home">
        <div class="home-header">
            <div class="home-index-search" @click="routers('/pray_search')">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" placeholder="搜索">
            </div>
        </div>
        <div class="pray-banner">
            <div class="pray-time">
                <div class="pray-time-l">{{ newPram.solardate }} <br/> {{ newPram.lunardate}} </div>
                <div class="pray-time-c">{{ newPram.holidayname}}</div>
                <div class="pray-time-r" v-if="newPram.remaindays > 2">还剩{{ newPram.remaindays }}天</div>
                <div class="pray-time-r" v-else >{{ newPram.remaindays | dayTime}}</div>
            </div>

            <van-swipe :autoplay="3000" indicator-color="white" style="height:4.2rem" @change="onChange">
                <van-swipe-item  v-for="(item, index) of banner" :key="index">
                    <img :src="item.showpicture || 'https://fo.china.com/res/upload/image/20180930/1538292774313007686.jpeg'" alt="">
                </van-swipe-item>
            </van-swipe>
            <!-- <img :src="newPram.showpicture || 'https://fo.china.com/res/upload/image/20180930/1538292774313007686.jpeg'" alt=""> -->

            <div class="pray-list">
                <div class="pray-list-li"  v-for="(item, index) of worshipList" :key="index" @click="addConsecrate(item.worshiptype, index, item)" >
                    <p><i class="iconfont" :class="[worshipName[item.worshiptype]]"></i>{{ item.worshipname}} </p>
                    <span>{{ item.totalnum }}</span>
                    
                </div>

                <transition-group name="list" tag="p">
                    <span v-for="item in items" v-bind:key="item" class="list-item" :style="{'left': 1.16 * leftIndex + 0.58 +'rem'}">
                      +1
                    </span>
                </transition-group>
                <!-- <em v-show="!!item.state" >+1 </em> -->
            </div>
        </div>

        <div class="pray-item-list">
            <div class="pray-item-li" @click="router(item)" v-for="(item, index) of list" :key="index">
                <div class="pray-item-img">
                    <div class="hot" v-if="item.ishot == 1">热门</div>
                    <div class="stick" v-if="item.issettop == 1">置顶</div>
                    <img :src="item.showpicture" alt="">
                </div>
                
                <div class="pray-item-cont">
                    <h2>{{ item.title.length > 16 ? `${item.title.substr(0,16)}...`: item.title}}</h2>
                    <div class="pray-item-time">{{ item.publishtime }}</div>
                    <div class="pray-item-view">
                        <span><i class="iconfont icon-chakanliang-"></i>{{ item.visitnum}}</span>
                        <span><i class="iconfont icon-renwu-"></i>{{ item.author }}</span>
                    </div>
                </div>
            </div>

            <div class="loding" v-if="loading">
                <img src="http://tmpfile.nbyh.mejimeji.net/loding1.gif" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import {getResponse, getResponses} from "../api"
import { setTimeout, clearTimeout, clearInterval } from 'timers';
export default {
    data() {
        return {
            lock:false,
            banner:[],
            list:[],
            pagenum:1,
            pagesize:10,
            total:0,
            worshipList:[],
            newPram:{},
            animateState:false,
            loading:false,
            worshipName:{
                'jx': 'icon-jingxianggonghuagongdeng-',
                'gh': 'icon-jingxianggonghuagongdeng-1',
                'gd': 'icon-jingxianggonghuagongdeng-2'
            },
            nextNum:0,
            items: [],
            leftIndex:0
        }
    },

    filters:{
        dayTime(value) {
            let iarr = ['今日', '明日', '后天']
            return iarr[Number(value)]
        }
    },

    methods:{
        router(item) {

            if(item.articlejumpurl != '' && !!item.articlejumpurl) {
                location.href = item.articlejumpurl 
                return false;
            }


            if( item.isarticleset == 1) {
                this.$router.push(`/article_set?articlesetid=${item.articlesetid}&title=${item.title}`)
                return false
            }

            this.$router.push(`/pray_details?id=${item.articleid}&showtype=${item.showtype}`)
        },

        routers(url) {
            this.$router.push(url)
        },

        onChange(index) {
            this.newPram = this.banner[index]
        },

        //最新一条纪念日
        async getFirstCommemoration(type) {	
            const data = await getResponses(`/fochina/query/foholiday/json`,{'querytype':2})
            if(data.code === '0000') {
                this.banner = data.data
                this.newPram = data.data[0]

            } else {
                console.log(data.error)
            }
        },

        async getCommemoration() {
            const data = await getResponses(`/fochina/query/articlelist/json`,{'querytype':1, 'pagenum':this.pagenum,'pagesize':10})
            if(data.code === '0000') {
                this.list = this.list.concat(data.data)
                this.total = data.total
                this.loading = true
                this.lock  = false
            } else {
                console.log(data.error)
            }
        },

        async getworship() {
            const data = await getResponses(`/fochina/query/worship/json`, {'worshiptype':0})
            if(data.code === '0000') {
                this.worshipList = data.data
                this.worshipList.map(value=> {
                    value.state = false
                    return value
                })
            } else {
                console.log(data.error)
            }
        },

        async addConsecrate(type, index, item) {
            this.leftIndex = index
            this.items.splice(0, 0, this.nextNum++)
            const data = await getResponses(`/fochina/query/addworshipnum/json`, {'worshiptype':type, 'worshipnum':1})
            setTimeout(()=>{
                this.items.splice(0, 1)
            },1000)
        },

    },

     mounted() {

        let innerHeight = window.innerHeight

        window.addEventListener('scroll', (e)=>{
            if(window.scrollY + innerHeight + 300 > document.getElementById('pray-home').offsetHeight && Math.ceil(this.total/this.pagesize) > this.pagenum) {
                if(this.lock) return;
                this.lock = true
                this.pagenum = this.pagenum +1
                this.loading = true
                this.getCommemoration()
            }
        })
    },

    created() {
        this.getworship()
        this.getFirstCommemoration()
        this.getCommemoration()
    }
}
</script>
<style scoped>

.list-item {
    font-style: normal;
    width:0.5rem;
    height: 0.26rem;
    background-color: rgba(183,53, 52, 0.6);
    position: absolute;
    top:0.4rem;
    left:50%;
    color: #fff;
    font-size:0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    
    transform: translate(-50%, -200%);
    opacity: 0;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter {
  opacity: 1;
  transform: translate(-50%, 0%);
}

.list-leave-to {
    opacity: 0;
}

.pray-item-cont {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.pray-item-li .pray-item-img .stick {
    transform: translate(50%, -50%) rotate(45deg);
    font-size:0.14rem;
    color: #FFFFFF;
    background-image: linear-gradient(-45deg, #B63532 50%, #A92926 100%);
    border-radius: 0 0.08rem 0;
    width:1.2rem;
    height: 1rem;
    position:absolute;
    top:0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-radius: 0px;
    padding-bottom: 0.1rem;
}

.pray-item-li .pray-item-img {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.26rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
}

.pray-item-li .pray-item-img .hot {
    /* opacity: 0.6; */
    background:#ffffff99;
    border-radius: 4px;
    width:0.6rem;
    height: 0.3rem;
    font-size: 0.18rem;
    color: #A92926;
    position: absolute;
    top:0.06rem;
    left:0.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}


.pray-item-cont h2 {
    font-family: PingFangSC-Regular;
    font-size: 0.32rem;
    color: #333333;
    text-align: left;
}

.pray-item-cont .pray-item-view {
    font-family: PingFangSC-Regular;
    font-size: 0.24rem;
    color: #999999;
    text-align: left;
   
}

.pray-item-cont .pray-item-view  span{
    display: inline-flex;
    align-items: center;
    min-width: 2rem;
}

.pray-item-cont .pray-item-view  span i {
    margin-right: 0.1rem;
}

.pray-item-cont .pray-item-time {
    font-family: PingFangSC-Regular;
    font-size: 0.24rem;
    color: #999999;
    text-align: left;
}

.pray-item-list {
    margin-top:0.2rem;
    width:100%;
    padding:0 0.25rem;
    box-sizing: border-box;
    background-color: #fff;
    border-top:0.01rem solid #eee;
}

.pray-list {
    /* width:46%; */
    height: 1rem;
    display: flex;
    bottom:0.4rem;
    right: 0;
    position: absolute;
    /* justify-content: space-around; */
}

.pray-list .pray-list-li {
    position: relative;  
    margin:0 0.08rem; 
}


.pray-list .pray-list-li p {
    background: rgba(130,49,23,0.70);
    width: 1rem;
    height: 1rem;
    color:#fff;
    font-size:0.22rem;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    justify-content: center;
    margin-bottom:0.06rem;
}

.pray-list .pray-list-li p > i {
    font-size:.4rem;
}

.pray-list .pray-list-li span {
    font-family: PingFangSC-Regular;
    font-size: 0.22rem;
    color: #FFFFFF;
    text-align: center;
}

.pray-list .pray-list-li em{
    font-style: normal;
    width:0.5rem;
    height: 0.26rem;
    background-color: rgba(183,53, 52, 0.6);
    position: absolute;
    top:0.4rem;
    left:50%;
    color: #fff;
    font-size:0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, 0%);
}

/* .pray-list .pray-list-li em.animation {
    animation:mymove 1s 1;
    z-index: 1;
}

@keyframes mymove
{
    from {
        transform: translate(25%, 0%); opacity: .5;
    }
    to {
        transform: translate(25%, -150%); opacity: 1;
    }
} */

.fadegd-enter-active, .fadegd-leave-active {
  transition: opacity .5s;
}
.fadegd-enter, .fadegd-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.fadegh-enter-active, .fadegh-leave-active {
  transition: opacity .5s;
}
.fadegh-enter, .fadegh-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}


.fadejx-enter-active, .fadejx-leave-active {
  transition: opacity .5s;
}
.fadejx-enter, .fadejx-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}



.pray-time {
    width:100%;
    height: 1rem;
    display: flex;
    position: absolute;
    top:0;
    left:0;
    z-index: 4;
}

.pray-time-c{
    display: flex;
    align-items: center;
    justify-content: center;
    flex:1;
    height: 1rem;
    background: #EEEAE9;
    font-family: PingFangSC-Medium;
    font-size:0.36rem;
    color: #823117;
    text-align: center;
    
}

.pray-time-l {
    display: flex;
    align-items: center;
    justify-content: center;
    width:1.8rem;
    height: 1rem;
    font-family: PingFangSC-Medium;
   font-size: 0.24rem;
    color: #FFFFFF;
    background-color: #823117;
    padding:0 0.1rem;
    box-sizing: border-box;
    line-height: 1.5
}

.pray-time-r {
    display: flex;
    align-items: center;
    justify-content: center;
    width:0.88rem;
    height: 1rem;
    background: #975C49;
    font-family: PingFangSC-Medium;
    font-size: 0.24rem;
    color: #FFFFFF;
    text-align: center;
    padding:0 0.14rem;
    box-sizing: border-box;
    line-height: 1.5
}

.pray-banner {
    position: relative;
    padding-top: 1rem;
}

.pray-banner  img{
    width:100%;
    height:100% !important;
}

.history_cont {
    display: flex;
    flex-wrap: wrap;
}

.history_item {
    min-width: 1.46rem;
    height: 0.46rem;
    background: #E9EAEC;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-size: 0.28rem;
    color: #333;
    margin-right:0.16rem;
    margin-bottom:0.16rem;
}

.history_record {
    width: 7.5rem;
    background-color: #fff;
    min-height: 100vh;
    padding:0 0.3rem;
    box-sizing: border-box;
    
}

.history_record h2 {
    font-family: PingFangSC-Medium;
    font-size: 0.34rem;
    color: #333;
    justify-content: space-between;
    display: flex;
    text-align: center;
    width:100%;
    padding:0.26rem 0;
}

.home-header {
    height: 1rem;
    width:100%;
    background-image: linear-gradient(-90deg, #B3A277 0%, #AB946C 100%);
    display: flex;
    justify-content: center;
    align-items: center
}

.home-index-search {
    width:7rem;
    height: 0.6rem;
    background-color:#fff;
    position: relative;
    
    box-sizing: border-box;
}

.home-index-search i.icon-sousuo{
    position: absolute;
    left:0.28rem;
    top:50%;
    transform: translateY(-50%);
    color:#B2B2B2;
}


.home-index-search i.icon-guanbi {
    position: absolute;
    top:0.12rem;
    right:0.22rem;
    color:#B2B2B2;
}

.home-index-search input {
    border:none;
    width:7rem;
    height: 0.6rem;
    font-size:0.28rem;
    padding:0 0.68rem 0 0.68rem;
    box-sizing: border-box;
    color:#666
}


.pray-item-li {
    width:100%;
    height: 2.1rem;
    border-bottom: 1px solid #eee;
    display: flex;
    padding:0.25rem 0;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 0.2rem;
    position: relative;
}

.pray-item-li img {
    width:1.6rem;
    height:1.6rem;
}

.item-list h2 {
    font-size:0.34rem;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.14rem;
}

.item-list h2 span {
    font-size: 0.24rem;
    color: #999;
}

.item-list p {
    font-size: 0.28rem;
    color: #666;
    line-height: 0.4rem;
}

.item-list-cont {
    flex:1
}

.item-list-cont p {
    width:100%;
    font-family: PingFangSC-Regular;
    font-size:0.28rem;
    color: #666666;
    text-align: justify;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    height:1.2rem;
    overflow: hidden
}

.home-item-list {
    padding-bottom:1rem;
}
</style>

